<template>
    <div class="accountPage flex_column">
        <div class="flex_between">
            <div class="selectVue flex">
                <el-input v-model="key" placeholder="请输入你要搜索的账号" style="width: 200px;" :clearable="true" prefix-icon="el-icon-search" @clear="clear"></el-input>
                <div class="btn" @click="getList">搜索</div>
            </div>
            <div class="flex">
                <div class="createBtn" @click="toCreate">创建子账号</div>
                <div class="btnVue" :class="{ active: total===0 }" @click="exportFun">导出数据</div>
            </div>
        </div>

        <div class="accountContent">
            <div class="thVue flex">
                <div class="li flex_center align_center" style="width: 120px; line-height: 40px; font-weight: 600;">账号</div>
                <div class="li flex_center align_center" style="width: 120px; line-height: 40px; font-weight: 600;">姓名</div>
                <div class="li flex_center align_center" style="width: 100px; line-height: 40px; font-weight: 600;">账号类型</div>
                <div class="li flex_center align_center" style="width: 200px; line-height: 40px; font-weight: 600;">A级客户数/聊天客户数</div>
                <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">分配微信数</div>
                <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">分配Token数</div>
                <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">平均对话条数</div>
                <div class="li flex_center align_center" style="flex: 1; line-height: 40px; font-weight: 600;">群发回复率</div>
                <div class="li flex_center align_center" style="width: 160px; line-height: 40px; font-weight: 600;">操作</div>
            </div>
            <div class="tdContent relative">
                <div class="flex_column align_center absolute_auto" v-if="isEmpty">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                </div>
                <div class="tdVue flex" v-for="(item, index) in list" :key="index">
                    <div class="li text_center" style="width: 120px; line-height: 50px; font-size: 13px;">{{ item.userName }}</div>
                    <div class="li line-1" style="width: 120px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;">{{ item.name }}</div>
                    <div class="li line-1" style="width: 100px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;">{{ item.isChild ? "子账号" : "主账号" }}</div> 
                    <div class="li" style="width: 200px; line-height: 50px; text-align: center; font-size: 13px; padding: 0 10px;">{{item.aLevelNum}}/{{ item.chatNum }}</div>
                    <div class="li text_center" style="flex: 1; line-height: 50px; font-size: 13px;">{{ item.wechatNum }}</div>
                    <div class="li text_center" style="flex: 1; line-height: 50px; font-size: 13px;">{{ item.tokenNum }}</div>
                    <div class="li text_center" style="flex: 1; line-height: 50px; font-size: 13px;">{{ item.avgDialogNum }}</div>
                    <div class="li text_center" style="flex: 1; line-height: 50px; font-size: 13px;">{{ item.replyRate * 100 }}%</div>
                    <div class="li flex align_center" style="width: 160px;">
                        <div class="btnVue" @click="handleManage(item.id)">管理</div>
                        <div class="btnVue" @click="handleDelete(item)">删除</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="paginationVue flex_center align_center">
            <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
        </div>

        <editVue :dialogTableVisible="editDialog" @beforeClose="editDialog=false" @callback="getList" ref="editRef"></editVue>
        <createVue :dialogTableVisible="createDialog" @beforeClose="createDialog=false" @callback="getList"></createVue>
    </div>
</template>

<script>
import { toast } from '@/common/tools';
import axios from 'axios';
import baseUrl from "@/common/baseUrl"
import { mapState } from 'vuex';
import createVue from './components/create.vue';
import editVue from './components/edit.vue';
export default {
    components: {
        createVue,
        editVue
    },
    data(){
        return {
            key: "",
            list: [],
            total: 0,
            pageNum: 1,
            pageSize: 20,
            createDialog: false,
            editDialog: false,
            isEmpty: false
        }
    },
    created(){
        this.getList()
        this.$store.dispatch("getUserPackageInfo")
    },
    computed: {
        ...mapState({
            userPackageInfo: state => state.userPackageInfo
        })
    },
    methods: {
        // 管理子账号
        handleManage(id){
            this.editDialog = true
            this.$refs.editRef.getDetail(id)
            this.$store.dispatch("getUserPackageInfo")
        },

        clear(){
            this.pageNum = 1
            this.getList()
        },

        // 创建子账号
        toCreate(){
            this.createDialog = true
            this.$store.dispatch("getUserPackageInfo")
        },

        // 删除子账号
        handleDelete(item){
            this.$alert(`确认删除子账号${item.userName}?`, '删除子账号', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        //删除微信代码
                        this.$post("/front/child/removeChild", {
                            id: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功") 
                                this.getList()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

        // 到处数据
        exportFun(){
            if(this.total===0) return toast(1, "无可导出数据")
            const url = `${baseUrl.url}/front/child/export`
            axios({
                url: url,
                method: 'post',
                responseType: 'blob', // 重要！
                headers: {'Content-Type': 'application/x-www-form-urlencoded', token: window.localStorage.getItem("ai_token")}
            }).then((response) => {
                console.log(response.data, response.status)
                if(response.status===200) {
                    const blob = new Blob([response.data]);
                    const downloadUrl = URL.createObjectURL(blob);
                    // 创建一个a标签用于下载
                    const downloadLink = document.createElement('a');
                    downloadLink.href = downloadUrl;
                    downloadLink.download = 'account.xlsx'; // 文件名，可以从response.headers中获取
                    document.body.appendChild(downloadLink);
                    downloadLink.click();
                    // 清理并移除元素和URL引用
                    document.body.removeChild(downloadLink);
                    window.URL.revokeObjectURL(downloadUrl);
                }else{
                    toast(1, response.msg)
                }  
            }).catch((error) => {
                console.error('下载文件出错:', error);
            });
        },

        // 获取子账号列表
        getList(){
            this.$post("/front/child/childList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userName: this.key
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                    this.isEmpty = this.total===0
                }
            })
        },

        // 分页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-icon-search:before) {
    color: #AAA !important;
}

:deep(.el-icon-circle-close) {
    font-size: 18px !important;
    color: #409EFF !important;
}
.accountPage {
    width: 100%;
    height: 100%;
    padding: 15px 15px 0;
    .selectVue {
        width: 100%;
        height: 40px;
        .btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            background: #0147fd;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
            margin-left: 15px;
        }   
    }
    .createBtn {
        width: 100px;
         height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        background: #0147fd;
        color: #fff;
        margin-left: 10px;
        cursor: pointer;
    }
    .accountContent {
        width: 100%;
        height: calc(100% - 50px - 40px);
        margin-top: 10px;
        .thVue {
            width: 100%;
            height: 40px;
            background: #f5f5f5;
        }
        .tdContent {
            width: 100%;
            height: calc(100% - 40px);
            overflow: scroll;
            .tdVue {
                width: 100%;
                height: 50px;
                border-bottom: 1px solid #f5f5f5;
                .btnVue {
                    width: 60px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    font-size: 13px;
                    color: #fff;
                    border-radius: 4px;
                    cursor: pointer;
                    margin: 0 2px;
                }
                .btnVue:nth-child(1) {
                    background: #0147fd;
                }
                .btnVue:nth-child(2) {
                    background: #d81e06;
                }
            }
            .tdVue:hover {
                background: #f5f5f5;
            }
        }
        .tdContent::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .paginationVue {
        width: 100%;
        height: 50px;
    }
    .btnVue {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        background: #0147fd;
        color: #fff;
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }
    .active {
        background: #AAA;
    }
}

</style>